import React, {Component} from 'react';
import './style.scss'
import {Toast, Flex} from 'antd-mobile';
import {phoneRegular} from '../../util/tools/regular'
import request from '../../api/fetch'
import { parse, stringify } from 'qs';

const x8 = require('../../assets/img/invite/8@2x.png')
const x18 = require('../../assets/img/invite/18@2x.png')
const x38 = require('../../assets/img/invite/38@2x.png')
const x88 = require('../../assets/img/invite/88@2x.png')
const x218 = require('../../assets/img/invite/218@2x.png')
const x518 = require('../../assets/img/invite/518@2x.png')

class InviteComponent extends Component {
    state = {
        sendCode: false,
        resultCode: false,
        discodeBtn: false,
        timer: 60,
        btnText: '60s',
        phone: '',
        code: '',
        pwd: '',
    }

    render() {
        const {location: {search}} = this.props
        let result=parse(search.split("?")[1])||{}
        const {sendCode, discodeBtn, btnText, resultCode, phone, code, pwd} = this.state
        const sendGetGift = () => {
            let _this = this;
            var r = phone.match(phoneRegular);
            if (r) {
                let obj = {
                    type: 1,
                    mobile: phone
                }
                request({
                    method: 'post', url: '/sms/send', data: obj
                }).then((res) => {
                    if (res.code === 200) {
                        _this.setState({
                            timer: 60,
                        })
                        const {timer} = this.state
                        let cloneTime = JSON.stringify(timer)
                        let newTime = ''
                        let siv = setInterval(() => {
                            newTime = --cloneTime;
                            _this.setState({
                                sendCode: true,
                                discodeBtn: true,
                                timer: newTime,
                                btnText: newTime + 's'
                            });
                            if (newTime === 0) {
                                clearInterval(siv);
                                _this.setState({btnText: '重新发送', discodeBtn: false})
                            }
                        }, 1000)
                    }
                })
            } else {
                Toast.info('请正确输入手机号！', 1);
            }

        }
        const getGift = () => {
            let obj = {
                pwd: pwd,
                code: code,
                mobile: phone,
                invitedCode: result.inviteCode
            }
            request({
                method: 'post', url: '/sign/reg', data: obj
            }).then((res) => {
                if (res.code === 200) {
                    this.setState({
                        resultCode: true,
                    })
                } else {
                    Toast.info(res.errMsg, 1);

                }
            })

        }
        const nextSend = () => {

        }
        const phoneChange = (e) => {
            this.setState({
                phone: e.target.value
            })
        }
        const codeChange = (e) => {
            this.setState({
                code: e.target.value
            })
        }

        const pwdChange = (e) => {
            this.setState({
                pwd: e.target.value
            })
        }
        return (<div className={'invite-warp'}>
            <div className={'banner'}>

            </div>
            {
                !sendCode ? <div className={'phone'}>
                        <div className={'phone-form'}>
                            <p>好友{result.mobile}邀请您来体验升值空间</p>
                            <input type="text" value={phone} onChange={phoneChange} placeholder={'请输入您的手机号接受邀请'}/>
                            <div onClick={sendGetGift} className={'phone-btn'}>领取888元礼包</div>
                        </div>
                    </div> :
                    !resultCode ?
                        <div className={'code'}>
                            <div className={'phone-form'}>
                                <p>好友{result.mobile}邀请您来体验升值空间</p>
                                <input type="text" value={phone} onChange={phoneChange} placeholder={'请输入您的手机号接受邀请'}/>
                                <div className={'code-warp'}>
                                    <input type="number" value={code} onChange={codeChange} placeholder={'请输入验证码'}/>
                                    <div onClick={sendGetGift} className={discodeBtn ? 'send-code' : 'active-code'}
                                         disabled={discodeBtn}>{btnText}</div>
                                </div>
                                <input type="password" value={pwd} onChange={pwdChange}
                                       placeholder={'8-18位数字、字母、符号组合密码'}/>
                                <div onClick={getGift} className={'phone-btn'}>立即领取</div>
                                <p className={'read'}>点击立即注册表示您已阅读并同意 <span>《用户服务协议》</span></p>
                            </div>
                        </div> : <div className={'result'}>
                            <div className={'result-content'}>
                                <p>您的888元新手礼包已放入升值空间账户</p>
                                <Flex className={'result-flex-warp'}>
                                    <Flex.Item>
                                        <img src={x8} alt=""/>
                                    </Flex.Item>
                                    <Flex.Item>
                                        <img src={x18} alt=""/>
                                    </Flex.Item>
                                    <Flex.Item>
                                        <img src={x38} alt=""/>
                                    </Flex.Item>
                                </Flex>
                                <Flex className={'result-flex-warp'}>
                                    <Flex.Item>
                                        <img src={x88} alt=""/>
                                    </Flex.Item>
                                    <Flex.Item>
                                        <img src={x218} alt=""/>
                                    </Flex.Item>
                                    <Flex.Item>
                                        <img src={x518} alt=""/>
                                    </Flex.Item>
                                </Flex>
                                <div className={'down-btn'}>立即下载APP查看</div>
                            </div>
                        </div>
            }

            <div className={'interest'}>
                <Flex className={'flex-warp'}>
                    <Flex.Item>
                        <div>9.0<span>%</span></div>
                        <p>约定年化利率</p>
                    </Flex.Item>
                    <Flex.Item>
                        <div>30<span>天</span></div>
                        <p>项目期限</p>
                    </Flex.Item>
                    <Flex.Item>
                        <Flex.Item>
                            <div>100<span>天</span></div>
                            <p>起投金额</p>
                        </Flex.Item>
                    </Flex.Item>
                </Flex>
            </div>
            <div className={'more'}></div>
            <div className={'invite-tip'}>网贷有风险，出借需谨慎</div>
        </div>)
    }
}

export default InviteComponent
